<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">个人信息</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">个人资料</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <p class="see_css">变更记录>查看</p>
    <!-- 下面的变更记录 -->
    <div class="record_css">
      <el-row>
        <!-- 左边大列 -->
        <el-col :span="18">
          <div class>
            <!-- 第一部分 -->
            <div>
              <!-- 第一行 -->
              <el-row>
                <el-col :span="18">
                  <h4>迁出人员信息</h4>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>姓名</span>
                    <span>武则天</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>身份证</span>
                    <span>230521199601202010</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>毕业院校</span>
                    <span>xxx</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>性别</span>

                    <span>女</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>学历</span>
                    <span>本科</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>专业技术植物系列</span>
                    <span>农民技术员</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>从事专业</span>
                    <span>经营管理</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>专业技术职务任职资格</span>
                    <span>助理农艺师</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv"></div>
                </el-col>
              </el-row>
            </div>
            <!-- 第二部分 -->
            <div>
              <!-- 第一行 -->
              <el-row>
                <el-col :span="18">
                  <h4>迁出单位信息</h4>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位名称</span>
                    <span>农贸市场</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位地区</span>
                    <span>江苏省-南京市-鼓楼区</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>统一社会信用码</span>
                    <span>2564564545</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位性质</span>
                    <span>事业单位</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>所属行业</span>
                    <span>信息传输、计算机服务和软件业</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位地址</span>
                    <span>鼓楼区</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>管理员姓名</span>
                    <span>李世民</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>管理员电话</span>
                    <span>13600000000</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv"></div>
                </el-col>
              </el-row>
            </div>
            <!-- 第三部分 -->
            <div>
              <!-- 第一行 -->
              <el-row>
                <el-col :span="18">
                  <h4>迁入单位信息</h4>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位名称</span>
                    <span>农贸市场</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位地区</span>
                    <span>江苏省-南京市-鼓楼区</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>统一社会信用码</span>
                    <span>2564564545</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位性质</span>
                    <span>事业单位</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>所属行业</span>
                    <span>信息传输、计算机服务和软件业</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位地址</span>
                    <span>鼓楼区</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>管理员姓名</span>
                    <span>李世民</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>管理员电话</span>
                    <span>13600000000</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv"></div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>

        <!-- 右边的步骤条 -->
        <el-col :span="6">
          <div>
            <h4 style="margin-bottom:20px">处理进度</h4>
            <div style="height: 300px;">
              <el-steps direction="vertical" :active="1">
                <el-step title="【单位】发起人员迁入迁出" description="xx单位"></el-step>
                <el-step title="【行业主管】审批" description="xx单位"></el-step>
                <el-step title="完成"></el-step>
              </el-steps>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
   mounted(){
    sessionStorage.setItem('fName', 'SeeChangeRecord');
  },
};
</script>
<style scoped lang="less">
.el-row {
    height: 40px;
    // line-height: 40px;
}
.fontDiv {
    width: 320px;
    position: relative;
}
.fontDiv > span:first-child {
  font-size: 12px;
  color: #999;

  position: absolute;
  width: 120px;
  text-align: right;
  text-align-last: right;
//   left: 0;
//   top: 0;
}
.fontDiv > span:first-child:before {
  position: absolute;
  left: 100%;
  content: "\FF1A";
}
.fontDiv > span:last-child {
  font-size: 12px;
  padding-left: 40%;
  color: #000;
}
.see_css {
  width: 110px;
  text-align: center;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  background-color: #ecf0fc;
  margin: 20px 30px 0;
}
.record_css {
  margin: 20px 30px 0;
}
</style>